<script setup lang="ts">
import { ref } from 'vue'
const list = ref<number[]>([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
const loading = ref(false)
const finished = ref(false)
const load = () => {
  // 接口调用
  setTimeout(() => {
    // 数据累加
    list.value.push(list.value.length + 1)
    // 修改v-model:loading的值为false
    loading.value = false
    // 修改下一页请求条件
    // 判断是否加载完成，如果完成 finished.value=true
    if (list.value.length >= 20) {
      finished.value = true
    }
  }, 2000)
}
</script>

<template>
  <div class="play-page">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="load"
    >
      <h3 v-for="(item, index) in list" :key="index">{{ item }}</h3>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.play-page {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  overflow: auto;
}
</style>
